<html>
    <head>
    
        
    
        <style type="text/css" title="main" media="screen"> 
            #comment {background-color:#FFFF99; border:1px dotted #B8B8B8; width:800px; height:640px; outline: none; }
            #paper {
                background-color:#FFFFFF; 
                
                border-color:#CCCCCC #BBBBBB #BBBBBB #CCCCCC;
                border-style:solid;
                border-width:1px 2px 2px 1px; 
                margin-left:30px;
                margin-right:30px;
                margin-top:10px;
                margin-bottom:50px;
                min-height:1000px;
                height:auto !important; 
                outline: none;
                padding-top:10px;
                padding-left:10px;
                padding-right:10px;
                padding-bottom:10px;
                
            }
            
            body {
                background-color:#F3F3F3 !important;
                
            }
 
        </style>
    
        <script type="text/javascript" src="/static/jquery.js"></script>
        <script type="text/javascript">
        
            if (window['loadFirebugConsole']) {
			   window.loadFirebugConsole();
			} else {
			   if (!window['console']) {
			       window.console = {};
			       f = function func(arg){};
			       window.console.info = f;
			       window.console.log = f;
			       window.console.warn = f;
			       window.console.error = f;
			   }
			}
            
            window.onload = function () {
                console.log('onload');
                if (self.initButtons)
                    initButtons();
                document.getElementById("paper").designMode = 'On';         // Moz, Op, Saf
                document.getElementById("paper").contentEditable = true;   // Op, IE, Saf
                document.designMode = 'On';         // Moz, Op, Saf
                document.contentEditable = true;
            /*  document.execCommand("styleWithCSS",false,false); */ // makes Moz use tags instead of style
            }
            
            function savePage(){
                var text = $('#paper').html(); 
                console.log('In save page Text: ' + text);
                    $.post("/pages/save/{{tag_uid}}/", {
                        'text': text,
                    },
                        function(data){
                            //alert(data.message); // John
                            console.log(data.message); //  2pm
                        }, "json");
                };
            
            function customHtml(htmltext){
            
                console.log('custom tag');
                //var divRef = document.getElementById("content_frame");
                //var selectionObj = document.selection;
                //var range = selectionObj.createRange();
                
                var userSelection;
                if (window.getSelection) {
                    userSelection = window.getSelection();
                }
                else if (document.selection) { // should come last; Opera!
                    userSelection = document.selection.createRange();
                }
                console.log('UserSelection: ' + userSelection);
                
                var selectedText = userSelection;
                if (userSelection.text)
                    selectedText = userSelection.text;
                
                
                var rangeObject = getRangeObject(userSelection);

                function getRangeObject(selectionObject) {
                    if (selectionObject.getRangeAt)
                        return selectionObject.getRangeAt(0);
                    else { // Safari!
                        var range = document.createRange();
                        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
                        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
                        return range;
                    }
                }
                
                var span = document.createElement(htmltext);
                span.setAttribute('id', 'test');
                rangeObject.surroundContents(span)
                //console.log('rangeobject: ' + rangeObject.html());
                //if(selectedText.length)
                    //console.log('Paste HTML');
                    //rangeObject.insertNode(document.createElement("p"));
                    //rangeObject.pasteHTML("<a title = 'Crisponzio'>" + selectedText + "</a>");
            
            }
            
            function customTag(){
            
                console.log('custom tag');
                //var divRef = document.getElementById("content_frame");
                //var selectionObj = document.selection;
                //var range = selectionObj.createRange();
                
                var userSelection;
                if (window.getSelection) {
                    userSelection = window.getSelection();
                }
                else if (document.selection) { // should come last; Opera!
                    userSelection = document.selection.createRange();
                }
                console.log('UserSelection: ' + userSelection);
                
                var selectedText = userSelection;
                if (userSelection.text)
                    selectedText = userSelection.text;
                
                
                var rangeObject = getRangeObject(userSelection);

                function getRangeObject(selectionObject) {
                    if (selectionObject.getRangeAt)
                        return selectionObject.getRangeAt(0);
                    else { // Safari!
                        var range = document.createRange();
                        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
                        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
                        return range;
                    }
                }
                
                var span = document.createElement('span');
                span.setAttribute('id', 'comment');
                rangeObject.surroundContents(span)
                //console.log('rangeobject: ' + rangeObject.html());
                //if(selectedText.length)
                    //console.log('Paste HTML');
                    //rangeObject.insertNode(document.createElement("p"));
                    //rangeObject.pasteHTML("<a title = 'Crisponzio'>" + selectedText + "</a>");
            
            }
            
            function inBetween(command,bool,value) {
            /*  var enabled = document.queryCommandSupported(command);
                if (!enabled) {
                    alert('Command not available');
                    return false;
                }
            */  console.log('inBetween');
                var returnValue = document.execCommand(command,bool,value);
                if (returnValue) return returnValue;
            }
            
            function loadContent(text) {
                $('#content_frame').html(text);
            }
            
            
            $(document).ready(function(){
                console.log('jquery ready');
                
                var isCtrl = false;
                var isCmd = false;
                                
                $(document).keyup(function (e) {
                    if ( (e.which == 17) || (e.which == 224) || (e.which == 91) ){
                        console.log('Fired keyup');
                    }
                    if(e.which == 17) isCtrl=false;
                    if((e.which == 224) || (e.which == 91)) isCmd=false;
                }).keydown(function (e) {
                    console.log(e.which);
	                if ( (e.which == 17) || (e.which == 224) ){
                        console.log('Fired keydown');
                    }
                    if(e.which == 17) isCtrl=true;
                    if((e.which == 224) || (e.which == 91)) isCmd=true;

                    if(e.which == 66 && (isCtrl == true || isCmd == true))  {
                        //run code for CTRL+S -- ie, save!
                        //alert('in bolding');
                        console.log('CTRL+B pressed');
                        inBetween('bold', false, null);
                        return false;
                    }
                    if(e.which == 83 && (isCtrl == true || isCmd == true))  {
                        console.log('saved');
                        savePage();
                        return false;
                    }
                    
                    if(e.which == 84 && (isCtrl == true || isCmd == true))  {
                        console.log('comment');
                        //html = prompt('custom html:');
                        customTag();
                        return false;
                    }                    
                });
            });
            
        </script>
    </head>
    <body id='content_frame'>
        <!-- <div id='aligner'> -->
            <div id='paper'>{% autoescape off %}{{ text }}{% endautoescape %}</div>
        <!-- </div> -->
    </body>
</html>